<template>
    <div>
        <div class="padding">列表</div>
        <div class="padding">列表中的按钮，已经封装成组件</div>
        <div class="padding">编辑按钮(edit-button)</div>
        <div class="padding">删除按钮(del-button)</div>
        <el-table :data="dataList" default-expand-all style="width: 100%" row-key="id"
                  :tree-props="{children: 'child'}" :indent="30" v-if="dataList.length > 0">
            <el-table-column label="ID" prop="id"></el-table-column>
            <el-table-column label="名字" prop="name"></el-table-column>
            <el-table-column label="时间-这是一个通过scope自定义列" prop="time">
                <template slot-scope="scope">
                    {{
                        scope.row.time === 0 ? '—' : $moment.unix(scope.row.time).format('YYYY-M-D HH:mm:ss')
                    }}
                </template>
            </el-table-column>
            <!--align:内容对齐，width：单元格宽度-->
            <el-table-column align="right" width="250">
                <template slot-scope="scope">
                    <base-button @click.native="$router.push({path:'/shiwu/detail/'+scope.row.id})">
                        详情
                    </base-button>
                    <edit-button @click.native="$router.push({path:'/shiwu/edit/'+scope.row.id})"></edit-button>
                    <del-button @click.native="del(scope.row.id)"></del-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="text-center padding-top-bottom-20" v-if="dataList.length > 0">
            <el-pagination
                background
                layout="total,prev, pager, next"
                :page-size="pageSize"
                :current-page.sync="page"
                :total="totalCount"
                @current-change="pageChange">
            </el-pagination>
        </div>
        <div class="margin-top">
            <div class="padding">CSS</div>
            <div>src/assets/main.css 中，已经封装了常用的样式</div>
            <div>如边距(如：.margin-top,.margin-bottom)</div>
            <div>填充(如：.padding,.padding-top)</div>
            <div>颜色(如：.dark-0,dark-1,.success)</div>
            <div>背景色(如：.bg-light,.bg-gray-0)</div>
            <div>字体大小(如：.f12,.f14)</div>
            <div>字体粗细(如：.f-n,.f-b)</div>
            <div>边框(如：.border-bottom，.border-top)</div>
        </div>
        <div class="margin-top">
            <div class="f18 margin-bottom">消息提示 -- 提示都已封装在$utils中，直接使用</div>
            <base-button @click.native="$utils.error('错误')" rule="/shiwu/detail">错误提示</base-button>
            <base-button @click.native="$utils.warning('警告')" rule="/shiwu/detail">警告提示</base-button>
            <base-button @click.native="$utils.success('正确')" rule="/shiwu/detail">正确提示</base-button>
            <base-button @click.native="$utils.message('消息')" rule="/shiwu/detail">一般提示</base-button>
        </div>
        <div class="margin-top">
            <div class="f18">验证表单 - 通过设置form的宽度，来限制整个表单的宽度</div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" style="width: 500px">
                <el-form-item label="活动名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="活动区域" prop="region">
                    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动时间" required>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item prop="date2">
                            <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="即时配送" prop="delivery">
                    <el-switch v-model="ruleForm.delivery"></el-switch>
                </el-form-item>
                <el-form-item label="活动性质" prop="type">
                    <el-checkbox-group v-model="ruleForm.type">
                        <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                        <el-checkbox label="地推活动" name="type"></el-checkbox>
                        <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                        <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="特殊资源" prop="resource">
                    <el-radio-group v-model="ruleForm.resource">
                        <el-radio label="线上品牌商赞助"></el-radio>
                        <el-radio label="线下场地免费"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="活动形式" prop="desc">
                    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="padding">富文本 - 尚未适配上传</div>
        <ck-editor v-model="content" id="text"></ck-editor>
        <div id="demo1"></div>
<!--        <editor-->
<!--            api-key="no-api-key"-->
<!--            :init="{-->
<!--         height: 500,-->
<!--         menubar: false,-->
<!--         plugins: [-->
<!--           'advlist autolink lists link image charmap print preview anchor',-->
<!--           'searchreplace visualblocks code fullscreen',-->
<!--           'insertdatetime media table paste code help wordcount'-->
<!--         ],-->
<!--         toolbar:-->
<!--           'undo redo | formatselect | bold italic backcolor | \-->
<!--           alignleft aligncenter alignright alignjustify | \-->
<!--           bullist numlist outdent indent | removeformat | help'-->
<!--       }"-->
<!--        />-->
    </div>
</template>

<script>
// import Editor from '@tinymce/tinymce-vue'
import wangEditor from 'wangeditor'
import User from "@/script/user";

export default {
    name: "Test",
    // components: {
    //     'editor': Editor
    // },
    data() {
        return {
            editor: null,
            editorData: '32323',
            page:1,
            pageSize:10,
            totalCount:200,
            content:'',
            dataList: [
                {id: '2121212', name: '2121', time: 1606337496},
                {id: '2121212212', name: '2121', time: 1606337496}
            ],
            ruleForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                date1: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                date2: [
                    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                ],
                type: [
                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
                resource: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
            }
        }
    },
    mounted() {
        this.createEditor();
        console.log(this.$user.getToken());
    },
    methods:{
        createEditor(){
            let _this = this;
            const editor = new wangEditor(`#demo1`)
            // 配置 onchange 回调函数，将数据同步到 vue 中
            editor.config.onchange = (newHtml) => {
                console.log(newHtml);
                this.editorData = newHtml
            }
            editor.config.uploadImgServer = this.$config.uploadUrl;
            editor.config.uploadFileName = 'file'
            editor.config.uploadImgHeaders = {
                Authorization : this.$user.getToken()
            }
            editor.config.uploadImgHooks = {
                customInsert: function(insertImgFn, result) {
                    // result 即服务端返回的接口
                    console.log('customInsert', result)

                    // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
                    insertImgFn(result.data.path.indexOf('http') >= 0 ? result.data.path : _this.$config.assetsUrl + result.data.path);
                }
            }

            // 创建编辑器
            editor.create()

            editor.txt.html(this.editorData);

            this.editor = editor
        },
        pageChange(page) {
            this.page = page;
            this.$utils.success('你翻页了');
        },
        del(id) {
            let _this = this;
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                _this.$utils.message('id是'+id);
            }).catch(() => {
                _this.$utils.warning('取消了');
            });
        },
        submitForm(formName) {
            //存在回调的方法，因为回调外和回调内的作用域不一致，所以务必为 _this 复制 this，否则在回调中无法访问this对象
            let _this = this;
            //通过传递form表单ref名称，来调用表单的validate方法
            this.$refs[formName].validate((valid) => {
                //为true时验证通过
                if (valid) {
                    _this.$utils.success('验证成功');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$utils.message('清空');
            this.$refs[formName].resetFields();
        }
    }
}
</script>

<style scoped>

</style>
